<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParam.role_name" size="small" placeholder="角色名称" clearable class="filter-item form-search-input" @keyup.enter.native="handleSearch" />
      <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
        重置
      </el-button>
      <el-button v-action="'role@create'" size="small" class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreateTop">
        新增
      </el-button>
    </div>
    <el-table v-loading="loading" :data="data" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :max-height="screenHeigh">
      <el-table-column prop="role_name" label="角色名称" align="center" />
      <el-table-column prop="identify" label="角色标识" align="center" />
      <el-table-column prop="description" label="角色描述" align="center" />
      <el-table-column prop="created_at" label="创建时间" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="role">
          <!-- <el-button type="primary" icon="el-icon-plus" @click="beforeHandleCreate(role.row)" /> -->
          <template v-if="role.row.identify !== 'admin'">
            <el-button v-action="'role@update'" size="small" type="primary" icon="el-icon-edit" @click="handleUpdate(role.row)" />
            <el-button v-if="role.row.id === 3 || role.row.id === 4" v-action="'role@delete'" size="small" type="danger" icon="el-icon-delete" disabled />
            <el-button v-else v-action="'role@delete'" size="small" type="danger" icon="el-icon-delete" @click="handleDelete(role.row.id)" />
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!------------------------- 角色 ------------------------------>
    <el-dialog :title="title" :visible.sync="formVisible" width="30%" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="role_name">
          <el-input v-model="formFieldsData.role_name" placeholder="请输入角色名称" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="角色标识" :label-width="formLabelWidth" prop="identify">
          <el-input v-model="formFieldsData.identify" placeholder="角色标识，路由权限时使用" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth" prop="description">
          <el-input v-model="formFieldsData.description" style="width: 92%" type="textarea" autosize />
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree ref="permissions" :data="permissions" :props="permissionProp" show-checkbox node-key="id" :expand-on-click-node="false" />
        </el-form-item>
        <el-form-item label="数据权限" :label-width="formLabelWidth" prop="data_range">
          <el-select v-model="formFieldsData.data_range" clearable placeholder="请选择数据权限" @change="selectDataRange">
            <el-option v-for="item in dataRange" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showCustomize" label="自定义权限" :label-width="formLabelWidth">
          <el-cascader v-model="formFieldsData.departments" :options="departments" :props="departmentsProp" :show-all-levels="false" clearable />
        </el-form-item>
        <el-input v-model="formFieldsData.parent_id" type="hidden" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button :loading="butLoading" :disabled="butLoading" type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import cacheList from '@/layout/mixin/cacheList'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'SystemRoles',
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      butLoading: false,
      otherHeight: 305,
      componentName: 'SystemRoles',
      formName: 'roles',
      formLabelWidth: '90px',
      // 刷新路由
      refreshRoute: true,
      formFieldsData: {
        role_name: '',
        identify: '',
        data_range: 3,
        parent_id: 0,
        permissions: [],
        departments: []
      },
      permissions: [],
      queryParam: { role_name: '' },
      url: 'roles',
      dataRange: [
        { id: 1, text: '全部数据权限' },
        // { id: 2, text: '自定义数据权限' },
        { id: 3, text: '仅本人数据权限' },
        { id: 4, text: '本组织数据权限' },
        { id: 5, text: '组织以及以下数据权限' }
      ],
      // 验证规则
      rules: {
        role_name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        identify: [
          { required: true, message: '请输入角色标识', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      },
      permissionProp: {
        label: 'permission_name'
      },
      // 展示自定义权限
      showCustomize: false,
      departments: [],
      departmentsProp: {
        label: 'department_name',
        value: 'id',
        emitPath: false,
        multiple: true
      }
    }
  },
  methods: {
    handlePermissions() {
      // this.$refs.permissions.setCheckedKeys(this.$refs.permissions.getCheckedKeys().concat(this.$refs.permissions.getHalfCheckedKeys()), true,false);
      this.formFieldsData.permissions = this.$refs.permissions.getCheckedKeys().concat(this.$refs.permissions.getHalfCheckedKeys())
    },
    getPermissions(roleId) {
      const params = {
        role_id: roleId
      }
      return new Promise((resolve, reject) => {
        this.$http.get('permissions', { params: params }).then(response => {
          this.permissions = response.data
          resolve(response.data)
        })
      })
    },
    // 选择权限
    selectDataRange(value) {
      this.showCustomize = value === 2
      // 选择自定义权限
      if (value === 2) {
        this.$http.get('departments').then(response => {
          this.departments = response.data
        })
      } else {
        this.departments = []
      }
    },
    beforeHandleCreate(role) {
      this.getPermissions(role.id)
      this.formFieldsData.parent_id = role.id
      this.handleCreate()
    },
    setRolePermissions(id) {
      this.$http.get('roles/' + id).then((res) => {
        const permissions = res.data.permissions
        permissions.map(permission => {
          const node = this.$refs.permissions.getNode(permission.id)
          if (node.isLeaf) {
            this.$refs.permissions.setChecked(node, true)
          }
        })
        // 自定义数据
        this.showCustomize = res.data.data_range === 2
        if (res.data.data_range === 2) {
          this.$http.get('departments').then(response => {
            this.departments = response.data
          })
          const departments = []
          res.data.departments.map(item => {
            departments.push(item.id)
          })
          this.formFieldsData.departments = departments
        }
      })
    },
    // 更新之前处理
    async beforeUpdate(role) {
      await this.getPermissions()
      this.setRolePermissions(role.id)
    },
    // 处理
    handleCreateTop() {
      this.getPermissions()
      this.formFieldsData.parent_id = 0
      this.formFieldsData.data_range = 3
      this.handleCreate()
    },
    // 处理提交角色
    beforeSubmit() {
      this.handlePermissions()
    }
  }
}
</script>

<style scoped>
.filter-container {
  border: none;
}
</style>
